{% extends "rbac/base.html" %}

{% block title %}仪表板 - RBAC权限管理系统{% endblock %}

{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="{% url 'rbac:welcome' %}">RBAC系统</a></li>
<li class="breadcrumb-item active" aria-current="page">仪表板</li>
{% endblock %}

{% block extra_css %}
<style>
/* 仪表板页面专用样式 */
.stats-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-left: 4px solid;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.stats-card .card-body {
    padding: 1.5rem;
}

.stats-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stats-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stats-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

.quick-action-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.quick-action-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

.quick-action-btn {
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #495057;
}

.quick-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    border-color: #66CC99;
    color: #2a5298;
}

.quick-action-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.system-info-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.system-info-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

.system-info-item {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.system-info-item:last-child {
    border-bottom: none;
}

.system-info-label {
    font-weight: 600;
    margin-right: 0.5rem;
}

.badge-sm {
    font-size: 0.75rem;
    padding: 0.25em 0.4em;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .stats-card .card-body {
        padding: 1rem;
    }
    
    .stats-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .stats-title {
        font-size: 0.75rem;
    }
    
    .stats-value {
        font-size: 1.25rem;
    }
    
    .quick-action-btn {
        padding: 0.75rem;
    }
    
    .quick-action-btn i {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .system-info-item {
        padding: 0.5rem 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- 页面标题区 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-1"><i class="fas fa-tachometer-alt text-primary me-2"></i>仪表板</h2>
                    <p class="text-muted mb-0">系统概览和快速访问</p>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card stats-card border-0 shadow-sm" style="border-left-color: #4e73df;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="stats-title text-primary">总用户数</div>
                                    <div class="stats-value text-dark">{{ total_users }}</div>
                                </div>
                                <div class="stats-icon bg-primary bg-opacity-10 text-primary">
                                    <i class="fas fa-users"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card stats-card border-0 shadow-sm" style="border-left-color: #1cc88a;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="stats-title text-success">总角色数</div>
                                    <div class="stats-value text-dark">{{ total_roles }}</div>
                                </div>
                                <div class="stats-icon bg-success bg-opacity-10 text-success">
                                    <i class="fas fa-user-tag"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card stats-card border-0 shadow-sm" style="border-left-color: #36b9cc;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="stats-title text-info">活跃角色数</div>
                                    <div class="stats-value text-dark">{{ active_roles }}</div>
                                </div>
                                <div class="stats-icon bg-info bg-opacity-10 text-info">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card stats-card border-0 shadow-sm" style="border-left-color: #f6c23e;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="stats-title text-warning">总权限数</div>
                                    <div class="stats-value text-dark">{{ total_permissions }}</div>
                                </div>
                                <div class="stats-icon bg-warning bg-opacity-10 text-warning">
                                    <i class="fas fa-key"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <!-- 快速操作 -->
                <div class="col-lg-6 mb-4">
                    <div class="card quick-action-card border-0 shadow-sm">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0 text-dark">
                                <i class="fas fa-bolt me-2 text-primary"></i>快速操作
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-6">
                                    <a href="{% url 'rbac:user_management' %}" class="quick-action-btn text-decoration-none d-block">
                                        <i class="fas fa-users text-primary"></i>
                                        <div class="fw-medium">用户管理</div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{% url 'rbac:role_list' %}" class="quick-action-btn text-decoration-none d-block">
                                        <i class="fas fa-user-tag text-success"></i>
                                        <div class="fw-medium">角色管理</div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{% url 'rbac:permission_list' %}" class="quick-action-btn text-decoration-none d-block">
                                        <i class="fas fa-key text-info"></i>
                                        <div class="fw-medium">权限列表</div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{% url 'rbac:account_info' %}" class="quick-action-btn text-decoration-none d-block">
                                        <i class="fas fa-user-cog text-warning"></i>
                                        <div class="fw-medium">账户设置</div>
                                    </a>
                                </div>
                                {% if is_superuser %}
                                <div class="col-6">
                                    <a href="/admin/" class="quick-action-btn text-decoration-none d-block" target="_blank">
                                        <i class="fas fa-tools text-dark"></i>
                                        <div class="fw-medium">Django管理</div>
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统信息 -->
                <div class="col-lg-6 mb-4">
                    <div class="card system-info-card border-0 shadow-sm">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="mb-0 text-dark">
                                <i class="fas fa-info-circle me-2 text-primary"></i>系统信息
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="system-info-item">
                                <span class="system-info-label">当前用户：</span>
                                <span>{{ current_user.username }}</span>
                                {% if is_superuser %}
                                    <span class="badge bg-danger badge-sm ms-2">超级管理员</span>
                                {% endif %}
                            </div>
                            <div class="system-info-item">
                                <span class="system-info-label">邮箱：</span>
                                <span>{{ current_user.email }}</span>
                            </div>
                            <div class="system-info-item">
                                <span class="system-info-label">角色：</span>
                                {% if current_user.roles %}
                                    {% for role in current_user.roles %}
                                        <span class="badge bg-primary badge-sm me-1">{{ role }}</span>
                                    {% endfor %}
                                {% else %}
                                    <span class="badge bg-secondary badge-sm">{{ current_user.role|default:"普通用户" }}</span>
                                {% endif %}
                            </div>
                            <div class="system-info-item">
                                <span class="system-info-label">系统版本：</span>
                                <span>RBAC v1.0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 添加一些交互效果
document.addEventListener('DOMContentLoaded', function() {
    // 为快速操作按钮添加点击效果
    const quickActionButtons = document.querySelectorAll('.quick-action-btn');
    quickActionButtons.forEach(button => {
        button.addEventListener('mousedown', function() {
            this.style.transform = 'translateY(0)';
        });
        
        button.addEventListener('mouseup', function() {
            this.style.transform = 'translateY(-3px)';
        });
        
        // 添加悬停效果
        button.addEventListener('mouseenter', function() {
            this.style.background = 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.background = 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)';
        });
    });
    
    console.log('🎉 仪表板页面初始化完成');
});
</script>
{% endblock %}